<template>
  <div class='home' :class="{'padding-top':scrollNumber>250}">
    <!--顶部-->
    <div class="header">
      <div class="search">
        <div class="search-btn" @click="toSearch">
          搜索
          <icon class="search-icon" type="search" size="12"/>
        </div>
      </div>
    </div>
    <!--end-->

    <!-- banner -->
    <swiper autoplay indicator-dots='true' circular="true" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white">
      <swiper-item v-for="(value,index) in imgList" :key="index" @click="toAdvert(value.link_url)">
        <img :src="value.img_url" class="slide-image" lazy-load="true"/>
      </swiper-item>
    </swiper>
    <!-- banner结束 -->

    <div class="section-list">
      <div class="section-item" v-for="(item,index) in navList" :key="index" @click="toJump(item.classify_id)">
        <div class="item-img">
          <img :src="item.img_id">
        </div>
        <div class="item-name">{{item.name}}</div>
      </div>
    </div>

    <!--推荐-->
    <div class="recommend" v-if="recommendData.length>0">
      <div class="recommend-title">
        <img src="../../../static/images/ishot.jpg" mode="widthFix" />
      </div>
    </div>
    <div class="recommend-list">
      <div class="null" v-if="recommendData.length==0">
        暂无热门推荐商品~~
      </div>
      <div class="recommend-item" v-for="(item,index) in recommendData" :key="index"  @click="toGoodsDetail(item.id)">
        <div class="item-img">
          <img :src="item.thumb_Url" mode="aspectFit"/>
        </div>
        <div class="item-des">{{item.name}}</div>
        <div class="price">
          <span>￥{{item.s_price}}</span>
          <span class="original">￥{{item.m_price}}</span>
        </div>
        <div class="sale_count">
          月售{{item.sale_count}}
          <img @click.stop="getGoodsDetails(item.id)" class="img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bifang/caret.png" />
          <div class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</div>
        </div>
      </div>
    </div>
    <!--推荐end-->

    <!-- 弹出层 -->
    <div class="mask"  v-if="showModal" @click="hideCart"></div>
    <div class="modalDlg" v-if="showModal">
      <div class="modalDlg_top">
        <img :src="goodsDetail.thumb_url" alt="">
        <div class="modalDlg_top_right">
          <div class="modalDlg_top_right_name">
            <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
            <span>{{goodsDetail.name}}</span>
          </div>
          <div class="cart_price">
            <span>￥{{goodsDetail.s_price}}</span>
            <span>库存：{{goodsDetail.stock}}</span>
          </div>
        </div>
      </div>
      <div class="modalDlo_center">
        <div class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</div>
        <div class="modalDlo_center_classify">
          <div
            v-for="(item,index) of goodsDetail.goods_spu_info"
            :key="index" @click="select_classify(item,index)"
            :class="{selectClassify:index==classifyIndex}"
          >
            {{item.spu_name}}
          </div>
        </div>
      </div>
      <div class="modalDlo_bottom">
        <count @numberChange="numberChange" :stock="goodsDetail.stock"><div>购买数量</div></count>
      </div>
      <div class="join_cart" @click="addCart">加入购物车</div>
    </div>
    <!-- 弹出层结束 -->

<!--    <div class=""></div>-->
  </div>
</template>

<script>

  import count from '@/components/count'
export default {
  components:{
    count
  },
  data() {
    return {
      recommendData:[],
      imgList:'',
      scrollNumber: 0,
      page:1,
      total: 0,
      navList: [],
      classify_id: '',
      showModal: false,
      goodsDetail: '',
      classifyIndex: -1,
      classifyId: '',
      num:1,//购买商品数量
      id: '',
    }
  },
  onPageScroll(e){
    this.scrollNumber = e.scrollTop;
  },
  methods:{
    toJump(id){
      wx.navigateTo({url: '/pages/goodsList/main?classify_id=' + id})
    },
    toGetgoods(id){
      this.classify_id = id;
      this.page = 1;
      this.getGoodList();
    },
    toAdvert(url) {
      let pattern = /^\/pages/
      if (pattern.exec(url)) {
        this.$currency.navigateTo(url)
      } else {
        wx.navigateTo({url: '/pages/advert/main?url=' + url})
      }
    },
    //获取分类
    async getGoodsClassify(){
      let res = await this.$request.getData('/goods/getGoodsClassify',{type:'section'});
      if (res.data.level == 'success'){
        this.navList = res.data.data;
      }
    },
    toSearch(){
      wx.navigateTo({url: '/pages/search/main'})
    },
    async getGoodList(){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getRecommendGoodsList',{
        page:this.page,
        limit:10,
        user_token: wx.getStorageSync('userToken')
      })
      if(res.data.level=='success'){
          if (this.page == 1){
            this.recommendData = res.data.data;
          } else {
            if (res.data.data.length==0){
              this.page--;
            }else {
              this.recommendData = this.recommendData.concat(res.data.data)
            }
          }
          this.total = res.data.page_info.total;
        wx.hideLoading()
      }
    },
    async getBanner(){
      let res=await this.$request.getData('/other/getBannerList');
      if(res.data.level=='success'){
        this.imgList=res.data.data;
        wx.stopPullDownRefresh()
      }
    },

    toGoodsDetail(id){
      wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
    },
    hideCart(){
      this.showModal = false;
      this.goodsDetail = '';
      wx.showTabBar();
    },
    async getGoodsDetails(id){
      if (id != this.id){
        this.classifyId = '';
        this.classifyIndex = -1;
      }
      let res=await this.$request.getData('/goods/getGoodsDetails',{goods_id:id})
      if(res.data.level=='success'){
        this.goodsDetail = res.data.data;
        this.id = id;
        this.num=1;
        this.showModal = true;
        wx.hideTabBar();
      }
    },
    select_classify(item,index){//选择规格
      this.classifyIndex=index
      this.classifyId=item.id
      this.$set(this.goodsDetail,'stock',item.stock)
      this.$set(this.goodsDetail,'s_price',item.price)
    },
    numberChange(num){
      this.num=num
    },
    async addCart(){//添加到购物车
      const _this=this
      if(this.num<=0){
        this.$currency.showToast('购买数量不能为0');
        return
      }else if(this.classifyId==''){
        this.$currency.showToast('先选择规格吧');
        return
      }
      var userToken=wx.getStorageSync('userToken')
      let res=await this.$request.postData('/goods/addShopCart',{
        goods_id:this.id,
        num:this.num,
        user_token:userToken,
        goods_spu_id:this.classifyId
      })
      wx.showLoading()
      if(res.data.level=='success'){
        _this.$currency.showToast('成功加入购物车','success',1500);
        _this.showModal=false;
        wx.showTabBar();
        _this.classifyId = '';
        _this.classifyIndex = -1;
        let num = _this.page;
        for (let i = 0; i< num ; i++){
          _this.page = i+1;
          _this.getGoodList()
        }
        wx.hideLoading();
      }else{
        wx.hideLoading({success:function(){
            _this.$currency.showToast(res.data.message,'none',1500)
          }});

      }
    },
  },
  onReachBottom(){
    this.page++;
    this.getGoodList()

  },
  onPullDownRefresh() {
    this.page=1;
    this.getBanner()
    this.getGoodList();
    this.recommendData=[]
    // this.discountData=[]
    // Do something when pull down.
  },
   onShareAppMessage(){
     return {
      title: '汉唐必方',
      desc:'',
    }
  },
  mounted() {
    // this.$store.state.modulesOrder
    // this.getBanner();
    // this.getGoodList();
    // this.getGoodsClassify();
  },
  onShow(){
    this.getBanner();
    this.getGoodsClassify();
    let num = this.page;
    for (let i = 0; i< num;i++){
      this.page = i+1;
      this.getGoodList();
    }
  },
  onHide(){
    // this.discountData=[]
    this.discountData=[]

  }
}
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";
  .home {
    width: 100%;
    padding-top: 55px;

    /*background: #eee;*/
  }
  .header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 55px;
    background: #e4e4e4;
    z-index: 3000;
    .search{
      width: calc(100vw - 20px);
      height: 25px;
      padding: 10px;
      .search-btn{
        width: calc(100% - 60px);
        position: relative;
        padding: 0 30px;
        height: 35px;
        line-height: 35px;
        border-radius: 360rpx;
        border: 1rpx solid #eeeeee;
        font-size: 12px;
        color: #858585;
        background: #ffffff;
        .search-icon{
          position: absolute;
          top: 15rpx;
          left: 25rpx;
        }
      }
    }
  }
  swiper{
    width: 100vw;
    height: 50vw;
  }
  .section-list{
    width: calc(100vw - 40rpx);
    padding: 30rpx 20rpx;
    background: #ffffff;
    margin: 10rpx auto;
    border-radius: 16rpx;
    @include flexWrap(flex-start);
    flex-direction: row;
    .section-item{
      padding:0 20rpx;
      width: calc((100vw - 200rpx)/4);
      @include flex();
      flex-direction: column;
      .item-img{
        width: 70%;
        height: calc((100vw - 200rpx)/4*0.7);
        border-radius: 360rpx;
        overflow: hidden;
        margin: 10rpx 0;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .item-name{
        height: 50rpx;
        line-height: 50rpx;
        font-size: 28rpx;
      }
    }
  }
  .padding-top{
    padding-top: calc(45px + 140rpx);
  }
  .fixed{
    position: fixed;
    top: 45px;
    left: 0;
    background: #ffffff;
    z-index: 1000;
  }
  .recommend{
    .recommend-title{
      width: 100%;
      background: #ffffff;
      padding: 20rpx 0;
      @include flex(flex-start);
      flex-direction: column;
      img{
        width: 100%;
      }
    }
  }
  .recommend-list{
    @include flexWrap(flex-start,flex-start);
    flex-direction: row;
    width: 100vw;
    /*margin-top: 10rpx;*/
    background: #ffffff;
    .null{
      width: 100%;
      padding: 60rpx 0;
      text-align: center;
      font-size: 34rpx;
      color: #959595;
      height: 100rpx;
      line-height: 100rpx;
    }
    .recommend-item{
      width: calc(((100% - 40rpx)/2) - 40rpx);
      padding: 20rpx;
      margin-right: 40rpx;
      margin-bottom: 40rpx;
      /*border-radius: 16rpx;*/
      overflow: hidden;
      background: #ffffff;
      @include flex();
      flex-direction: column;
      .item-img{
        width: 100%;
        height: 300rpx;
      }
      .item-des{
        height: 80rpx;
        line-height: 80rpx;
        width: 100%;
        @include ellipsis(1);
      }
      .price{
        font-size: 26rpx;
        @include flex(flex-start,flex-end);
        flex-direction: row;
        height: 30rpx;
        width: 100%;
        color: #e12317;
        .original{
          font-size: 22rpx;
          color: #707070;
          text-decoration: line-through;
          padding-left: 20rpx;
        }
      }
      .sale_count{
        position: relative;
        font-size: 24rpx;
        color: #b2b2b2;
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        @include flex(flex-start);
        .img{
          margin-left: auto;
          width: 40rpx;
          height: 40rpx;
        }
        .img-icon{
          position: absolute;
          bottom: 20rpx;
          right: 0;
          width: 20rpx;
          height: 20rpx;
          background: #e12317;
          border-radius: 360rpx;
          color: #ffffff;
          font-size: 18rpx;
          text-align: center;
          line-height: 20rpx;
        }
      }
    }
    .recommend-item:nth-child(even){
      margin-right: 0;
    }
  }
  .active{
    font-weight: bold;
    font-size: 30rpx;
  }
  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }
  .modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
  }

  .modalDlg_top{
    padding:5px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;

  }
  .modalDlg_top>img{
    width:80px;
    height: 80px;
  }
  .modalDlg_top_right{
    margin-left:20px;
    width:200px;
  }
  .modalDlg_top_right_name{
    display: flex;
    align-items: center
  }
  .modalDlg_top_right_name_tag{
    color:purple;
    display: inline-block;
    width:50px;
    text-align: center;
    border:1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right:5px;
  }
  .modalDlg_top_right_name_tag+span{
    width:200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .modalDlo_bottom{
    margin-left:5px;
  }
  .cart_price{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .cart_price>span:nth-child(1){
    color:red;
  }

  .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
    width:100%;
  }
  .modalDlo_center_classify{
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    margin:10px 0;
    padding-bottom: 20px;
  }
  .modalDlo_center_classify>div{
    border:1px solid #eee;
    padding:2.5px 5px;
    border-radius: 5px;
    margin-left:5px;
    text-align: center;
  }
  .modalDlo_center_tit{
    padding-left:10px;
  }
  .join_cart{
    width:100%;
    background: rgb(196, 75, 75);
    color:#fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    bottom:0;
  }
  button::after {
    border: none;
  }
  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius:0;
  }
  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }
</style>
